<script setup lang="ts" name="Login">
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { type FormInstance, type FormRules, ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
import { login, userInfo } from '@/api/user'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'

// 获取路由
const router = useRouter()
// pinia数据
const userStore = useUserStore()

// 表单数据接口限制
interface formData {
    name: string
    pwd: string
}
// 表单数据
const loginData = reactive<formData>({
    name: '',
    pwd: ''
})

// 表单对象
const formRef = ref<FormInstance>()

// 验证规则
const rules = reactive<FormRules<formData>>({
    name: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { min: 3, max: 15, message: '账号必须在3-15长度', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 18, message: '密码必须在6-18长度', trigger: 'blur' },
    ]
})

// 表单提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // 表单验证
    let resultFlag = await formEl.validate((valid, fields) => {})
    // 表单验证失败
    if(!resultFlag){
        return ElMessage.error('表单验证不通过！')
    }
    // 验证成功
    // 登录前等待中
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    // 登录
    let loginResult = await login('/login', loginData)
    // 登录返回关闭等待中
    loading.close()
    // 登录失败
    if(loginResult.status != 0){
        return ElMessage.error(loginResult.message)
    }
    // 登录成功 保持token并跳转
    userStore.token = loginResult.data.token
    // 根据token获取用户信息
    let userInfoResult = await userInfo('/userInfo')
     // 登录失败
     if(userInfoResult.status != 0){
        return ElMessage.error(userInfoResult.message)
    }
    userStore.userInfo.id = userInfoResult.data.id
    userStore.userInfo.name = userInfoResult.data.name

    ElMessage.success('登录成功')
    setTimeout(()=>{
        router.push('/')
    },2000)
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>
<template>
    <el-card class="box-card">
        <div class="title">CMS后台管理登录</div>
        <el-form ref="formRef" :model="loginData" :rules="rules">
            <el-form-item prop="name">
                <el-input size="large" :prefix-icon="UserFilled" placeholder="请输入账号" v-model="loginData.name" />
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input type="password" show-password size="large" :prefix-icon="Lock" placeholder="请输入密码"
                    v-model="loginData.pwd" />
            </el-form-item>
            <el-form-item>
                <div class="bnt">
                    <el-button type="primary" @click="submitForm(formRef)">登录</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<style scoped lang="scss">
.box-card {
    width: 480px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
        display: flex;
        justify-content: center;
        font-size: 36px;
        margin-bottom: 20px;
    }

    .bnt {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
}
</style>